<#assign ctx>${rc.contextPath}</#assign>
<script>
    $(function () {
        $("span.collapsed").click(function () {
            var targtId = $(this).attr("href").replace("#", "");
            $(".accordion-body[id!=" + targtId + "]").attr("class", "accordion-body collapse").css("height", "0px");
            //控制打开和开闭图标变化
            var i = $(this).find("i");
            if (i.hasClass("icon-folder-open")) {
                i.attr("class", "icon-folder-close");
            } else {
                $(".icon-folder-open").each(function () {
                    $(this).attr("class", "icon-folder-close");
                });
                i.attr("class", "icon-folder-open");
            }
        });
        $("a[item]").click(function () {
            $("i.icon-arrow-right").remove();
            var parent = $(this).parent();
            parent.append("<i class='icon-arrow-right'></i>");
        });
    });
</script>
<style>
    .accordion-toggle {
        font-weight: bold;
        /*color: #82c341;*/
        background-color: #F5F5F5;
    }

    .accordion-inner i.icon-arrow-right {
        position: absolute;
        right: 25px;
    }

    dd {
        border-bottom: 1px dashed blue;
        margin: 5px;
        padding-left: 16px;
        padding-bottom: 4px;
        display: inline-block;
        width: 80%;
    }

    .accordion-inner {
        padding: 0px;
    }
</style>
<div class="accordion">
    <!--<div class="accordion-group">-->
        <!--<div class="accordion-heading">-->
			<!--<span class="accordion-toggle" data-toggle="collapse" href="#collapse1">-->
				<!--<i class="icon-folder-open"></i>-->
				<!--权限|角色管理(G)-->
			<!--</span>-->
        <!--</div>-->
        <!--<div style="height: auto;" id="collapse1" class="accordion-body in collapse">-->
            <!--<div class="accordion-inner">-->
                <!--<dl>-->
                    <!--<dd title="用户列表">-->
                        <!--<i class="icon-user"></i>-->
                        <!--<a href="${ctx}/security/users/list" item="">用户列表 </a>-->
                    <!--</dd>-->
                    <!--<dd title="1">-->
                        <!--<i class="icon-cog"></i>-->
                        <!--<a href="${ctx}/security/roles/list" item="">角色列表 </a>-->
                    <!--</dd>-->
                    <!--<dd title="1">-->
                        <!--<i class="icon-comment"></i>-->
                        <!--<a href="${ctx}/security/resourcesGroup/list" item="">资源分组 </a>-->
                    <!--</dd>-->
                    <!--<dd title="1">-->
                        <!--<i class="icon-th-large"></i>-->
                        <!--<a href="${ctx}/security/resources/list" item="">资源列表 </a>-->
                    <!--</dd>-->
                <!--</dl>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <#list groupMap?keys as key>
        <div class="accordion-group">
            <#assign group=groupMap[key] />
            <div class="accordion-heading">
			<span href="#collapse${group.id}" data-toggle="collapse" class="accordion-toggle collapsed">
				<i class="icon-folder-close"></i>
				${group.name}
			</span>
            </div>
            <div class="accordion-body collapse" id="collapse${group.id}" style="height: 0px;">
                <div class="accordion-inner">
                    <dl>
                        <#list menuMap[key] as menu>
                            <dd title="${menu.memo}">
                                <i class="${menu.icon}"></i>
                                <a item href="${ctx}${menu.url}">${menu.name} </a>
                            </dd>
                        </#list>
                    </dl>
                </div>
            </div>
        </div>
    </#list>
</div>